<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="./css/example.css" />
    <script src="./libs/layui/layui.js"></script>
    <link rel="stylesheet" href="./libs/layui/css/layui.css" />
    <title>iconSelected - 图标选择器</title>
</head>

<body>
    <div class="board">
        <h1 class="title">效果展示</h1>
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-form-label">选择图标1</div>
                <div class="layui-input-block">
                    <input type="text" name="icon1" value="layui-icon layui-icon-username" placeholder="请选择"
                        maxlength="16" autocomplete="off" class="layui-input layui-select-icon" id="icon" />
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-label">选择图标2</div>
                <div class="layui-input-block">
                    <input type="text" name="icon2" value="layui-icon layui-icon-light" placeholder="请选择" maxlength="16"
                        autocomplete="off" class="layui-input layui-select-icon" id="icon" />
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-label">名称</div>
                <div class="layui-input-block">
                    <input type="text" name="name" value="用户管理" autofocus maxlength="16" autofocus required
                        lay-verify="required" autocomplete="off" class="layui-input" placeholder="名称" />
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-label">备注信息</div>
                <div class="layui-input-block">
                    <textarea name="remark" rows="3" placeholder="可留空" class="layui-textarea"
                        style="resize: none"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="submit" value="保存" class="layui-btn" lay-submit />
                    <input type="reset" value="重新填写" class="layui-btn layui-btn-primary" />
                    <input type="button" id="update" value="更新图标1" class="layui-btn layui-btn-primary" />
                </div>
            </div>
        </div>
    </div>
    <script>
        layui
            .config({
                base: "./libs/layui_exts/",
            })
            .extend({
                iconSelected: "iconSelected/js/index",
            });

        layui.use(["layer", "iconSelected", "form", "jquery"], function () {
            var iconSelected = layui.iconSelected;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;

            /**
             * v2 版本开始保持跟 layui 官方写法同步
             * 使用 render 方法渲染, 并且 v2 开始支持 class 批量绑定
             * v1 版本仅支持 id 绑定, 且初始化是 init
             * 请注意辨别, v2版本于2021年8月19日发布
             * 庆祝码云开放 Gitee Page 功能
             * 本组织下所有开源扩展都会于近期同步升级到v2
             * 都将统一初始化函数为  render
             */
            iconSelected.render(".layui-select-icon", {
                event: {
                    select(event, data) {
                        console.log("选中的图标数据", { event, data });
                    },
                },
            });

            form.on("submit", function (data) {
                layer.open({
                    title: "提交内容",
                    content: '<pre style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; font-family: Consolas;">' + JSON.stringify(data.field, null, 4) + "</pre>",
                });
                return false;
            });

            //更新图标1
            $("#update").on('click', function () {
                iconSelected.updateValue("[name='icon1']", "layui-icon layui-icon-android");
                return false;
            });
        });
    </script>
</body>

</html>